<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 动态变色示例</title>
    <script src="js/vue.js"></script>
    <style>
        /* - 创建主题切换功能
- 使用v-bind动态绑定CSS类名
- 使用v-bind动态绑定内联样式 demo4已运用demo7的操作*/
        #bgcolor {
            border: 2px solid #ccc; 
        }
        .red {
            background-color: red;
        }

        .blue {
            background-color: blue;
        }

        .green {
            background-color: green;
        }

        .yellow {
            background-color: yellow;
            color: #000;
        }
    </style>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <div id="bgcolor" :class="colorClass">
            当前数值: {{ count }}
            <br>
            <button @click="changCount">点击变色</button>
        </div>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                msg: "Vue",
                count: 0,
                colorClass: "red"
            },
            methods: {
                changCount() {
                    this.count++;
                    if (this.count > 3) {
                        this.count = 0;
                    }
                    if (this.count === 0) {
                        this.colorClass = "red";
                    } else if (this.count === 1) {
                        this.colorClass = "blue";
                    } else if (this.count === 2) {
                        this.colorClass = "green";
                    } else if (this.count === 3) {
                        this.colorClass = "yellow";
                    }
                }
            }
        });
    </script>
</body>

</html>